<template>
    <div class="newaddress">
        <!-- --------------点击编辑 编辑地址页-------------- -->
         <div class="back-nav-box">
            <back-nav title="编辑地址" left-text="返回" left-arrow @navback="navback"></back-nav>
        </div>
        <!-- 信息栏 -->
        <div class="field-msg">
           <van-form ref="submit">
            <!-- 输入任意文本 -->
            <van-field v-model="uname" label="姓名" placeholder="收货人姓名" :rules="[{ required: true, message: '请填写用户名' }]" />
            <!-- 输入手机号，调起手机号键盘 -->
            <van-field v-model="tel" type="tel" label="电话" placeholder="收货人手机号" name="pattern" :rules="[{ pattern, message: '请输入正确内容' }]"/>
            <!--  省市区选择器 -->
            <van-field
                readonly
                clickable
                name="area"
                :value="areaValue"
                label="地区"
                placeholder="选择省/市/区"
                @click="showArea = true"
                :rules="[{ required: true, message: '请选择地区' }]"
            />
            <van-popup v-model="showArea" position="bottom">
                <van-area
                    :area-list="areaList"
                    @confirm="onConfirm"
                    @cancel="showArea = false"
                />
            </van-popup>
            <!-- 输入任意文本 -->
            <van-field v-model="uaddress" label="详细地址" placeholder="街道门牌、楼层房间号等信息" :rules="[{ required: true, message: '请填写详细信息' }]"/>
                 <!-- 输入邮政编码 -->
            <van-field v-model="postCode" type="num" label="邮政编码" placeholder="邮政编码" name="pattern" :rules="[{ pattern, message: '请输入正确邮政编码' }]" />
                <!-- 设为默认地址 -->
                <div class="default-address">
                    <van-cell center title="设为默认地址">
                    <template #right-icon>
                        <van-switch v-model="defaultChecked" size="24" @click="isDefault=!isDefault"/>
                    </template>
                    </van-cell>
                </div>
                <div class="save-address">
                    <van-button round type="info" native-type="submit" @click="editaddress">保存地址</van-button>
                </div>
          </van-form>
        <!-- 保存地址 -->
        </div>

    </div>
</template>

<script>
import BackNav from '../components/BackNav.vue'
import { areaList } from '@vant/area-data';//引进省市区数据

    export default {
        data() {
            return {
                uname:'',
                tel:'',
                postCode:'',
                uaddress:'',
                pattern: /\d{6}/,
                showArea: false,
                areaValue:'',
                areaList,
                defaultChecked:false,
                areaCode:'',
                isDefault:false,
                aid:''
            }
        },
        components:{BackNav},
        created() {
            this.findAddressByaid();
        },
        methods: {
            // nav 返回
            navback(){
                this.$router.go(-1)
            },
            // 省市区 组件方法
            onConfirm(values) {
            console.log('values',values);
            this.areaCode=values[2].code
            this.areaValue = values
                .filter((item) => !!item)
                .map((item) => item.name)
                .join('/');
            this.showArea = false;
            return
            },
            // 编辑地址 接口
            editaddress(){
                // 获取传过来aid
                this.aid=this.$route.query.aid
                let areaArr=[]
                if(this.areaValue!==''){
                    areaArr=this.areaValue.split('/');
                }
                let isDefault=0;
                if(this.isDefault){
                    isDefault=1
                }else{
                    isDefault=0
                }
                console.log(areaArr);
                this.axios({
                    method:'post',
                    url:'/editAddress',
                    data:{
                        aid:this.aid,
                        name:this.uname,
                        tel:this.tel,
                        province:areaArr[0],
                        city:areaArr[1],
                        county:areaArr[2],
                        addressDetail:this.uaddress,
                        areaCode:this.areaCode,
                        postalCode:this.postCode,
                        isDefault
                    }
                }).then(res=>{
                    console.log('editaddress res=>',res);
                   
                    setTimeout(()=>{
                        this.$router.push({name:'Addressmanage'})
                    },1000)

                }).catch(err=>{
                    console.log('err',err);
                })
            },
            // 根据aid查询地址
            findAddressByaid(){
                  // 获取传过来aid
                this.aid=this.$route.query.aid
                this.axios({
                    method:'get',
                    url:'/findAddressByAid',
                    params:{
                        aid:this.aid
                    }
                }).then(res=>{
                    console.log('findAddressByAid res=>',res);
                    this.uname=res.data.result[0].name
                    this.tel=res.data.result[0].tel
                    this.postCode=res.data.result[0].postalCode
                    this.uaddress=res.data.result[0].addressDetail
                    
                }).catch(err=>{
                    console.log('err',err);
                })
            }
        },
        updated() {
            console.log(this.areaValue);
            // console.log(this.areaList);
            // console.log(this.isDefault);
        },
    }
</script>

<style lang="less" scoped>
.save-address{
    width: 355px;
    margin: 10px auto;
    .van-button{
        width: 100%;
        background-color: #0c34ba;
    }
}
.default-address{
    width: 355px;
    margin: 10px auto;
    border-radius: 10px;
    overflow: hidden;
}
.field-msg{
    width: 355px;
    margin: 10px auto;
    border-radius: 10px;
    overflow: hidden;
}
.back-nav-box{
        z-index: 9;
        position: sticky;
        top: 0;
    }
.newaddress{
    min-height: 100vh;
    background-color: #f7f7f7;
}
</style>